<form class="preview-config-modal-form" role="form">
  <div class="modal-header">
    <button type="button" class="close" ng-click="cancel()">
      <span aria-hidden="true">&times;</span>
      <span class="sr-only">Close</span>
    </button>
    <h3 class="modal-title" translate="home.previewPane.configTitle">Preview Configuration</h3>
  </div>
  <div class="modal-body">

    <div class="form-group">
      <label class="control-label" translate="home.previewPane.previewSource">Preview Source</label>
      <select class="form-control"
              name="previewSource"
              ng-model="previewConfig.previewSource">
        <option value="{{pipelineConstant.CONFIGURED_SOURCE}}"
                ng-selected="previewConfig.previewSource === pipelineConstant.CONFIGURED_SOURCE">
          {{'home.previewPane.configuredSource' | translate}}</option>
        <option value="{{pipelineConstant.SNAPSHOT_SOURCE}}"
                ng-selected="previewConfig.previewSource === pipelineConstant.SNAPSHOT_SOURCE">
          {{'home.previewPane.snapshotSource' | translate}}</option>
        <!--option value="{{pipelineConstant.USER_PROVIDED}}"
                ng-selected="previewConfig.previewSource === pipelineConstant.USER_PROVIDED">
          {{'home.previewPane.userProvider' | translate}}</option-->
      </select>
    </div>

    <div class="form-group" ng-if="previewConfig.previewSource !== pipelineConstant.USER_PROVIDED">
      <label class="control-label" translate="home.previewPane.batchSize">Preview Batch Size</label>
      <input type="text" class="form-control" name="batchSize"
             ng-model="previewConfig.batchSize">
    </div>

    <div class="form-group" ng-if="previewConfig.previewSource !== pipelineConstant.USER_PROVIDED">
      <label class="control-label" translate="home.previewPane.timeout">Preview Timeout</label>
      <input type="text" class="form-control" name="timeout"
             ng-model="previewConfig.timeout">
    </div>

    <div class="checkbox">
      <label>
        <input type="checkbox" ng-model="previewConfig.writeToDestinations"> {{'home.previewPane.writeToDestinations' | translate}}
        <i class="fa fa-info-circle help-icon"
           tooltip-placement="right"
           tooltip-append-to-body="false"
           tooltip="{{'home.previewPane.writeToDestinationsTooltip' | translate}}"
           tooltip-trigger="mouseenter"></i>
      </label>
    </div>


    <div class="checkbox">
      <label>
        <input type="checkbox" ng-model="previewConfig.showHeader"> {{'home.previewPane.showHeader' | translate}}
      </label>
    </div>


    <div class="checkbox">
      <label>
        <input type="checkbox" ng-model="previewConfig.showFieldType"> {{'home.previewPane.showFieldType' | translate}}
      </label>
    </div>

    <div class="form-group" ng-if="snapshotsInfo && snapshotsInfo.length && previewConfig.previewSource === pipelineConstant.SNAPSHOT_SOURCE">
      <label class="control-label" translate="home.previewPane.snapshotSource">Snapshot</label>
      <select class="form-control"
              name="snapshotInfo"
              ng-model="previewConfig.snapshotInfo"
              ng-options="snapshotInfo.id group by snapshotInfo.name for snapshotInfo in snapshotsInfo track by snapshotInfo.timeStamp">

      </select>
    </div>

    <div class="form-group" ng-if="previewConfig.previewSource === pipelineConstant.USER_PROVIDED">
      <label class="control-label" translate="home.previewPane.inputData">Input Data</label>

      <div ui-codemirror
           class="codemirror-editor"
           ng-model="previewConfig.userData"
           ui-refresh="refreshCodemirror"
           ui-codemirror-opts="getCodeMirrorOptions({
                lineNumbers: true
              })"
           field-paths="fieldPaths">
      </div>

    </div>


    <div class="checkbox">
      <label>
        <input type="checkbox" ng-model="previewConfig.rememberMe"> {{'home.previewPane.rememberMe' | translate}}
      </label>
    </div>

  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" ng-click="cancel()"
            translate="global.form.cancel">Cancel</button>
    <button type="submit" class="btn btn-primary" ng-click="runPreview()"
            translate="home.previewPane.runPreview">Run Preview</button>
  </div>
</form>
